<script setup>
import router from "@/router";
import { ref } from 'vue';

const homeServices = ref([
  { id: 1, title: '清洁服务', description: '提供专业的家庭清洁服务，包括日常保洁、深度清洁等。', image: '/imgs/摄图网_600614953_厨房的洗菜盆(仅交流学习使用).jpg' },
  { id: 2, title: '护理服务', description: '提供专业的护理服务，帮助老人进行日常生活照料。', image: '/imgs/陪伴.jpg' },
  { id: 3, title: '烹饪服务', description: '提供专业的烹饪服务，为老人准备健康美味的餐食。', image: '/imgs/摄图网_502487998_时令蔬菜(仅交流学习使用).jpg' },
  { id: 4, title: '陪伴服务', description: '提供专业的陪伴服务，陪伴老人度过愉快的时光。', image: '/imgs/陪伴2.jpg' }
]);
</script>

<template>
  <el-container style="background-color: gainsboro">
    <el-header class="header" style="background-color: #f59e34">
      <el-row type="flex" align="middle">
        <el-col :span="8">
          <el-row type="flex" align="middle">
            <el-col :span="6" class="image-col">
              <div class="image-container">
                <img src="/imgs/admin/趣home-01.png" alt="趣home-01" class="image">
              </div>
            </el-col>
            <el-col :span="1">
              <img src="/imgs/login/verticalLine.png" style="height: 50px;width: 100%">
            </el-col>
            <el-col :span="15">
              <span style="color:black;font-weight: bold;font-size: 30px;">居家养老服务平台</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <el-row type="flex" align="middle">
            <el-col :span="20">
              <el-row>
                <el-col :span="3"><span @click="router.push('/look')">首页</span></el-col>
                <el-col :span="3"><span @click="router.push('/homeService')">家政服务</span></el-col>
                <el-col :span="3"><span @click="router.push('/doctorService')">医疗服务</span></el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-dropdown style="position: absolute;right: 30px ; bottom: 2px; top:0px;" trigger="click">
                <span style="font-size: 19px;font-weight: bold;">
                  <el-icon :size="30"><Avatar /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="router.push('/login')">登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="main">
      <el-card style="margin: 20px;">
        <el-row :gutter="10">
          <el-col :span="24">
            <h1>家政服务</h1>
            <p>我们提供全面的家政服务，旨在为老人创造一个舒适、安全的生活环境。</p>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6" v-for="service in homeServices" :key="service.id">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="service.image" class="card-image" />
              <div style="padding: 14px;">
                <span>{{ service.title }}</span>
                <div class="bottom clearfix">
                  <p>{{ service.description }}</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-main>
    <el-footer class="footer">
      <div class="services">
        <h2>我们的服务</h2>
      </div>
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="12">
          <p>版权所有 2023 居家养老服务平台</p>
          <p>联系电话：123-456-7890</p>
        </el-col>
        <el-col :span="12">
          <p>邮箱：info@homecare.com</p>
          <p>关注我们：
            <a href="#" class="social-link">微博</a> |
            <a href="#" class="social-link">微信</a>
          </p>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<style scoped>
.footer {
  background-color: #f59e34; /* 淡黄色 */
  color: #333; /* 文字颜色 */
}
.services h2 {
  margin-bottom: 20px; /* 标题与内容之间的间距 */
}
.social-link {
  text-decoration: none;
  color: #409eff;
}
.image-col {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.image {
  height: 50px; /* 调整图片高度 */
  width: auto; /* 保持图片比例 */
  max-width: 100%; /* 确保图片不会超出容器宽度 */
  padding-top: 10px;
}
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>
